<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // ES6 之前的写法
        // 构造函数用于创建对象实例
        function Point1(x, y) {
            // 对象的属性
            this.x = x;
            this.y = y;
            this.state = { msg: 111 };
        }
        // 对象的方法
        Point1.prototype.toString = function () {
            return `(${this.x},${this.y})`;
        }

        // ES6新增的写法：其实就是之前构造函数的语法糖
        class Point2 {
            // 类的构造函数
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.state = { msg: 111 };
            }
            
            // 类的原型上的方法
            toString() {
                return `(${this.x},${this.y})`;
            }
        }

        const p1 = new Point1(1,2);
        const p2 = new Point2(3,4);

        console.log(p1);
        console.log(p2);
        
        // 小结：class 本质是构造函数，用于创建对象的。
    </script>
</body>

</html>